Main Page #3

lbratkovskaya · 2021-03-07T17:59:42Z

Main application page with counties list. Contains routing and i18next internationalization

Tonia-SE · 2021-03-07T19:46:25Z

src/components/CountryPage/index.tsx

+  // TODO
+
+  return (<div title={t(`${countryId}.name`)}>{t(`${countryId}.name`)}</div>);
+}


Файлы компонентов лучше называть по имени компонента вместо index.tsx

Не согласна: именование index.tsx позволяет уменьшить длину строки импорта модуля, так как index - это "специальное" имя, которое ищется внутри папки по умолчанию.

Благодаря index мы можем написать путь './component/App' вместо './components/App/App'

Tonia-SE · 2021-03-07T19:48:39Z

src/components/CountryPage/index.tsx

+} from 'react-router-dom';
+
+
+export default function CountryPage(): JSX.Element {


почему тип компонента JSX.Element? не лучше в одном стиле, также как и все остальные компоненты, React.FC?

src/types/index.d.ts

src/store/store.ts

src/i18next.ts

AlexeyTeterin · 2021-03-08T05:58:23Z

Еще у меня как-то некорректно работает роутинг.
При перезагрузке страницы по кнопке в chrome вылезает "Cannot GET /countries" вместо контента.
Если в адресной строке вместо http://localhost:3000/countries вбиваем http://localhost:3000 то страница грузится нормально.

src/components/ImagesGrid/index.tsx

src/components/CountryPage/index.tsx

lbratkovskaya · 2021-03-08T07:10:42Z

Еще у меня как-то некорректно работает роутинг.
При перезагрузке страницы по кнопке в chrome вылезает "Cannot GET /countries" вместо контента.
Если в адресной строке вместо http://localhost:3000/countries вбиваем http://localhost:3000 то страница грузится нормально.

Это неизбежно. Можно убрать рут countries и делать это корнем

AlexeyTeterin · 2021-03-08T07:16:54Z

Еще у меня как-то некорректно работает роутинг.
При перезагрузке страницы по кнопке в chrome вылезает "Cannot GET /countries" вместо контента.
Если в адресной строке вместо http://localhost:3000/countries вбиваем http://localhost:3000 то страница грузится нормально.

Это неизбежно. Можно убрать рут countries и делать это корнем

Тогда я за то чтобы убрать.

Tonia-SE · 2021-03-07T20:06:06Z

src/store/rootReducer.ts

@@ -1,9 +1,56 @@
 export interface IAppState {
-  lang: 'EN' | 'RU' | 'DE'
+  lang: 'EN' | 'RU' | 'DE',
+  countries: Country[],
 }

 const initialState: IAppState = {


Это initial state не всего App, а только для Main page, его лучше вынести в отдельный файл, например, mainPageReduser, и импортировать его в rootReduser

Tonia-SE · 2021-03-07T20:17:17Z

src/store/rootReducer.ts

+    name: 'Japan',
+    pictureURL: 'https://i-fakt.ru/1/tokio.jpg',
+  },
+  ],
 };

 const rootReducer = (state: IAppState = initialState, action: any) => {


const rootReducer = (state: IAppState = initialState, action: any)
action type должен быть описан соответствующим интерфейсом, например,
interface IRoorReduserAction {
type: string;
lang?: string;
countries?: Array
}

Tonia-SE · 2021-03-08T06:14:00Z

src/components/ImagesGrid/index.tsx

+);
+const ImagesGrid: React.FC<rootProps> = (props: rootProps) => {
+  const classes = useStyles();
+  const { lang, countries } = props;


если lang не используется, может быть его записать спред-оператором ... . + такой записи еще и втом, что не при раширении rootProps, на придется дописывать новые свойства

feat: main page with routing & lang

48ebd2f

lbratkovskaya changed the title ~~feat: main page with routing & lang~~ Main Page Mar 7, 2021

lbratkovskaya requested review from Alexandr4e, Tonia-SE and AlexeyTeterin March 7, 2021 18:00

Tonia-SE reviewed Mar 7, 2021

View reviewed changes

AlexeyTeterin requested changes Mar 8, 2021

View reviewed changes

src/types/index.d.ts Outdated Show resolved Hide resolved

src/store/store.ts Outdated Show resolved Hide resolved

src/store/store.ts Show resolved Hide resolved

src/store/store.ts Outdated Show resolved Hide resolved

src/i18next.ts Outdated Show resolved Hide resolved